今天學什麼？

今天閱讀「適用於 Android 開發人員的 Jetpack Compose」第一章「Compose 基礎知識」的「實際進行設計」的 8~15 小章

學習筆記

1. LazyHorizontalGrid可以想成 RecyclerView 的 GridLayoutManager，同一個項目多種排列方式
   • 在rows的GridCells.Fixed()設定數量就好

   LazyHorizontalGrid(
      rows = GridCells.Fixed(數量),
      modifier = modifier
   ) {
      items(favoriteCollectionsData) { item ->
   
      }
   }
   

2. Compose 會希望把相同的元件做成一個函式來重複使用，但有些元件是無法重複的，例如某個選單的名字，所以使用Slot API來處理
   1. 函式新增content: @Composable () -> Unit
   2. 函式的 lambda 就能放入Row或Column來排版

   fun HomeSection(
      @StringRes title: Int,
      modifier: Modifier = Modifier,
      content: @Composable () -> Unit    //這邊放入 1.
   ) {
      Column(modifier) {
          Text(stringResource(title))    //這邊放入 2.
          content()
      }
   }
   

3. 元件和元件之間的間距，可以用Spacer來隔開

   fun HomeScreen(modifier: Modifier = Modifier) {
      Column(modifier) {
          Spacer(Modifier.height(16.dp))    //間距 16dp
          SearchBar(Modifier.padding(horizontal = 16.dp))
          HomeSection(title = R.string.align_your_body) {
              AlignYourBodyRow()
          }
          Spacer(Modifier.height(16.dp))    //間距 16dp
          HomeSection(title = R.string.favorite_collections) {
              FavoriteCollectionsGrid()
          }
          Spacer(Modifier.height(16.dp))    //間距 16dp
      }
   }
   

4. 如果資料沒有很多，但還是想要能滑動，可以在modifier設定上下滑動verticalScroll或左右滑動horizontalScroll，再放入rememberScrollState()就行，簡單說就是把他當ScrollView來用

   Column(
      modifier
          .verticalScroll(rememberScrollState())
   ) {
   
   }
   

5. 可以用NavigationBar來當 ViewPager 用，不過今年 Google IO 已經說 ViewPager 支持 Compose
6. 使用WindowSizeClass判斷目前視窗大小
   • Compact：直向畫面
   • Expanded：橫向畫面

   fun MySootheApp(windowSize: WindowSizeClass) {
      when (windowSize.widthSizeClass) {
          WindowWidthSizeClass.Compact -> {
              MySootheAppPortrait()    //直向畫面顯示的 UI
          }
          WindowWidthSizeClass.Expanded -> {
              MySootheAppLandscape()    //橫向畫面顯示的 UI
          }
      }
   }